2.2.4: Product Image does not load if Product Name contains a double quotation mark

[bradhar]

Preconditions

1. Magento version 2.2.4
2. MySQL version 5.6.23
3. PHP version 7.0

Steps to reproduce

1. Create a simple product with a product image.
2. Add at least one double quotation mark (ASCII 34: ") into the Product Name. Example product name: <<Picture Frame 3" x 5">>
3. Access the product page from the customer front end.

Expected result

1. The product image should display on the product page.

Actual result

1. The placeholder product image (spinning loading animation) is displayed and the product image does not display on the product page.

[ghost]

Hello Bradhar,
We have a solution for this issue ,you have face this issue its because of breadcrumb feature update.
To solve this issue override "breadcrumb.phtml" file in your theme

app/design/frontend/[THEME VENDOR]/[YOUR THEME]/Magento_Catalog/templates/product

path and replace with below code.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/** @var \Magento\Theme\Block\Html\Breadcrumbs $block */
/** @var \Magento\Catalog\ViewModel\Product\Breadcrumbs $viewModel */
$viewModel = $block->getData('viewModel');
?>
<div class="breadcrumbs" data-mage-init='{
    "breadcrumbs": {
        "categoryUrlSuffix": "<?= $block->escapeHtml($viewModel->getCategoryUrlSuffix()); ?>",
        "useCategoryPathInUrl": <?= (int)$viewModel->isCategoryUsedInProductUrl(); ?>,
        "product": "<?= $block->escapeHtml($block->escapeJsQuote($viewModel->getProductName(), '"')); ?>"
    }
}'>
</div>

Actually it is updated in git Magento repo, but it is not applied in magento 2.2.4 downloaded ZIP ,that's why I can't submit pull request.
I hope it will help you !!.

[sunilit42]

I am working on this at #dmcdindia

[sunilit42]

It is already fixed into 2.2

https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Catalog/view/frontend/templates/product/breadcrumbs.phtml

[aeu]

I am seeing this in 2.2.5.

As a workaround you can use https://en.wikipedia.org/wiki/Prime_(symbol) instead of double quotes, which is more typographically correct anyway.