Картинка заглушка для сайта: Генерирование изображений-заглушек / Хабр

160 просмотров

• дизайн
• Web-дизайн
• дизайн сайта
• графический дизайн

ruby ​​on rails — заглушить URL-адрес изображения и вернуть изображение

спросил 10 лет, 10 месяцев назад

Изменено 9 месяцев назад

Просмотрено 2к раз

Как заглушить вызов URL-адреса, например http://www. example.com/images/123.png, и вернуть изображение с именем 123.png?

Я использую Rails 3.2, Carrierwave. Я пробовал Fakeweb, но немного запутался.

• ruby-on-rails
• Carrierwave
• fakeweb

После нескольких часов исследований оказалось, что все просто:

 FakeWeb.register_uri(:get, string_or_regxp_of_uri,
        тело: SupportFiles.uploaded_file("square.jpg"),
        content_type: 'изображение/jpg')
 

Моя проблема сложнее:
Я тестирую аватар FB и получил самое белое расширение

Приведенный выше код НЕ будет работать, так как расширение отсутствует
(URL аватара FB: https://graph.facebook.com/123 /картинка)

Но настоящий аватар FB будет перенаправлять на CDN или что-то с расширением
Так что вам нужно добавить еще одну заглушку:

 # Зарегистрируйте поддельное удаленное изображение
fake_avatar_uri = "https://graph.facebook.com/fake_avatar.jpg"
# Перенаправление на поддельный uri
FakeWeb. register_uri(:get, %r|https://graph\.facebook\.com/|,
  статус: ["301", "Перемещено навсегда"],
  местоположение: fake_avatar_uri)
# Подача поддельного изображения для поддельного uri
FakeWeb.register_uri(:get, fake_avatar_uri,
  тело: SupportFiles.uploaded_file("square.jpg"),
  content_type: 'изображение/jpg')
 

Модуль SupportFiles (не написанный мной: P):

 требуется 'rack/test/uploaded_file'
модуль SupportFiles
  расширить ActiveSupport::Concern
  включено делать
    пусть(:an_image) сделать
      open_file("квадрат.jpg")
    конец
  конец
  def open_file(имя файла)
    File.open(support_file_path(имя файла))
  конец
  # идея украдена из ActionDispatch::TestProcess#fixture_file_upload
  def загруженный_файл (имя файла)
    Rack::Test::UploadedFile.new(support_file_path(имя файла))
  конец
  функция_модуля : загруженный_файл
  защищенный
  def support_file_path (имя файла)
    Rails.root.join("spec/support/files", имя файла)
  конец
  module_function :support_file_path
конец
 

Чтобы имитировать URL-адрес внешнего изображения с файлом, вы можете заглушить запрос с любым объектом IO , например:

 описать '#create' do
  он «создает элемент»
    io_object = fix_file_upload('images/1. png', 'image/png').tempfile.to_io
    stub_request(:get, 'http://www.example.com/images/123.png')
      .to_return (статус: 200, тело: io_object, заголовки: {})
    параметры = {
      имя: "Хороший предмет",
      remote_file_url: 'http://www.example.com/images/123.png')
    }
    api_post (путь к элементам, параметры)
  конец
конец
 

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Обязательно, но не отображается

Опубликовать как гость

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

reactjs — Импорт изображений ломает шуточный тест

спросил 5 лет, 7 месяцев назад

Изменено 5 месяцев назад

Просмотрено 63к раз

Компоненты In React, импортирующие активы (например, импортировать логотип из «../../../assets/img/logo.png) выдает такую ​​ошибку

({«Объект.»:функция(модуль,экспорт,требовать,__имя_каталога,__имя_файла,глобальный,шутка){�PNG
SyntaxError: Неверный или неожиданный токен в ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)

моя конфигурация шутки

 "шутка": {
"testRegex": ".*\\.spec\\.js$",
"расширения_файла_модуля": [
  "ДжС",
  "JSX",
  "жсон"
],
"каталоги модулей": [
  "узловые_модули",
  "источник",
  "ресурсы"
],
"moduleNameMapper": {
  "\\. (jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$/": "/ __mocks__/fileMock.js",
  "\\.(css|less|scss)$": "/__mocks__/styleMock.js"
},
"многословный": правда,
"залог": правда
}
 

что я упустил?

• реакция
• тестирование
• веб-пакет
• jestjs

Когда вы импортируете файлы изображений, Jest пытается интерпретировать двоичные коды изображений как .js, поэтому возникают ошибки.

Единственный выход — имитировать ответ по умолчанию каждый раз, когда шутка видит импорт изображения!

Как нам это сделать?

• сначала вы говорите Jest запускать фиктивный файл каждый раз, когда встречается импорт изображения. вы делаете это, добавляя приведенный ниже ключ в файл package.json

 "шутка": {
 "moduleNameMapper": {
      "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": " /mocks/fileMock. js",
      "\\.(css|less)$": "/mocks/fileMock.js"
    }
}
 

Примечание : если у вас уже есть ключ "Jest" , просто добавьте в него дочерний элемент "moduleNameMapper"

• , наконец, создайте папку mocks в корне и создайте 9 0042 файлMock.js файл внутри него. заполните файл фрагментом ниже

 модуль.экспорт = '';
 

Примечание : Если вы используете es6, вы можете использовать export default ''; , чтобы избежать флага Eslint

, когда вы закончите с вышеуказанными шагами, вы можете перезапустить тест и все готово.

Примечание . не забудьте добавить различные расширения ваших файлов изображений в moduleNameMapper , чтобы их можно было высмеивать.

Надеюсь, я смог помочь. #ваше здоровье!

Для всех, кто занимается этой проблемой. Вы должны установить npm install --save-dev identity-obj-proxy , чтобы получить необходимые зависимости.

 "шутка": {
    "moduleNameMapper": {
      ".+\\.(css|стиль|меньше|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
    }
  }
 

У меня была такая же проблема, и я решил ее следующим образом:

1. npm install -D jest-transform-stub
2. Затем в package.json я добавил следующее преобразование:

    "шутка": {
        ...
        "преобразовать": {
            ...
            ".+\\.(css|scss|png|jpg|svg)$": "шутка-преобразование-заглушка"
 

У меня была такая же проблема! Я не уверен, что это тот же случай, что и в исходном вопросе, но для меня шутка все еще каким-то образом пыталась загрузить изображения как JS и пыталась их проанализировать, в то время как у меня были файлы, соответствующие расширениям изображений, сопоставленным с макетом в 9@/(. *)’: ‘<корневой_каталог>/src/$1′, ‘\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$’: ‘/__mocks__/fileMock.js’, // ‘\\.(css|less)$’: ‘/__mocks__/styleMock.js’, ‘.*\\.(css|less)$’: ‘identity-obj-proxy’, }

Для меня оказалось, что когда я импортировал изображения в свои компоненты, путь был примерно таким: ‘@/assets/someImage.jpg’. Однако кажется, что это сначала будет соответствовать первому регулярному выражению, охватывающему 9@/(.*)\\.(?!jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$’ : ‘<корневой_каталог>/src/$1′, ‘.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$’: ‘/__mocks__/fileMock.js’, // ‘\\.(css|less)$’: ‘/__mocks__/styleMock.js’, ‘.*\\.(css|less)$’: ‘identity-obj-proxy’, }

Добавление следующей строки в файл jest. config.js помогло мне пройти тест,

 "\\.(jpg|jpeg|png)$": "identity-obj-proxy",
 

Пример:

 moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png)$": "идентификация-obj-прокси",
  },
 

Если вы хотите использовать jest с веб-пакетом, вам нужно явно настроить его соответствующим образом. Взгляните на это руководство здесь: https://jestjs.io/docs/webpack

Для тех, кто использует Vue test util в Nuxt 2 и столкнулся с вопросом или этой проблемой ({"Object.":function(module,exports,require,__dirname,__filename,jest){ SyntaxError: Недопустимый или неожиданный токен

создать файл с именем fileTransformer.js в test/unit , а затем добавьте следующие коды:

 const path = require('path')
модуль.экспорт = {
  процесс (источник, имя файла, конфигурация, параметры) {
    return 'module.exports = ' + JSON. stringify (path.basename (имя файла)) + ';'
  },
}
 

, а затем добавьте эти коды к 9.+\\.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$’: require.resolve( ‘../node_modules/react-native/jest/assetFileTransformer.js’, ), },

Если вы не используете React Native, необходимо создать файл https://github.com/facebook/react-native/blob/main/jest/assetFileTransformer.js в своем проекте и изменить путь на require.resolve

 npm install --save-dev identity-obj-proxy
 

и добавьте в jest.config.js следующее:

 moduleNameMapper: {
    "\\.(css)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png)$": "идентификация-obj-прокси",
  },
 

это сработало для меня.

У меня ничего не сработало, поэтому я заменил «крепление» с «мелководьем» везде, и теперь оно работает нормально.

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Требуется, но не отображается

Опубликовать как гость

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.